<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>生产代工</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="line">
            <img :src="$global.Image.icon_goods_line" />
        </div>
        <div class="container">
            <div class="line-ti">
                <div>生产代工</div>
                <router-link class="new" :to="`/oemCreate`">新增生产代工</router-link>
            </div>
            <div class="list">
                <router-link :to="'/oemDetail/' + item.id" class="itm" v-for="(item,index) in list" :key="index">
                    <div class="title">{{item.name}}</div>
                    <div class="brand op0">品牌：{{item.brand}}</div>
                    <div class="itm-b">
                        <div class="itm-name">{{item.contacts}} {{item.mobile}}</div>
                        <div class="itm-line"></div>
                        <div class="itm-date">{{item.create_time}}</div>
                    </div>
                </router-link>
                <div class="itm-1"></div>
            </div>
            <div class="nodata" v-if="list.length == 0">
                <img :src="$global.Image.noData" />
            </div>
            <el-pagination background layout="prev, pager, next" :total="page" :size="limit">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {artIcleList} from '@api/user';
export default {
    data() {
        return {
            loading: false,
            type: 2,
            page: 1,
            limit: 18,
            count: 0,
            list: [],
        }
    },
    methods:{
        getList(){
            let data = {
                type: this.type,
                page_index:this.page,
                page_size:this.limit
            }
            if (this.loading) return;
            this.loading = true
            artIcleList(data).then(res => {
                this.list = res.data.list;
                this.count = res.data.count || 0;
                this.loading = false
            });
        }
    },
    mounted(){
        this.getList()
    }
};
</script>
<style >
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #da213d;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}
.el-pagination {
    margin: 65px 0;
    display: flex;
    justify-content: center;
}
</style>
<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.line {
    width: 1200px;
    margin: 0 auto 30px;
    img {
        display: block;
        width: 100%;
    }
}
.line-ti {
    width: 100%;
    border-bottom: 1px solid #dbdbdb;
    display: flex;
    .new {
        width: 110px;
        height: 34px;
        background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
        border-radius: 5px;
        font-size: 14px;
        text-align: center;
        color: #ffffff;
        margin-left: auto;
        line-height: 34px;
        &::before {
            height: 0;
        }
    }
    > div {
        color: #da213d;
        font-size: 18px;
        // border-bottom: 3px solid $color;
        // width: 112px;
        line-height: 36px;
        font-weight: bold;
        position: relative;
        &::before {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 72px;
            height: 3px;
            background: #da213d;
        }
    }
}
.list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 50px;
    box-sizing: border-box;
    .itm-1 {
        width: 346px;
    }
    .itm {
        margin-top: 30px;
        width: 346px;
        height: 140px;
        padding: 20px;
        box-sizing: border-box;
        background: url("../../assets/second_icon/demand_list_img.png")
            no-repeat;
        background-size: 100% 100%;
        .title {
            font-size: 16px;
            font-weight: bold;
            text-align: justify;
            color: #da213d;
            line-height: 22px;
        }
        .brand {
            margin-top: 15px;
            font-size: 16px;
            font-weight: bold;
            text-align: left;
            color: #333333;
            line-height: 16px;
        }
        .itm-b {
            margin-top: 10px;
            display: flex;
            font-size: 14px;
            color: #666666;
            line-height: 14px;
            justify-content: space-between;
            align-items: center;
            .itm-name {
            }
            .itm-line {
                width: 2px;
                height: 15px;
                background: #666666;
            }
            .itm-date {
            }
        }
    }
}
</style>